<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入SweetAlert2 -->
    <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css" rel="stylesheet">

    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4096ff',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#dcdfe6',
                            400: '#c0c4cc',
                            500: '#909399',
                            600: '#606266',
                            700: '#303133',
                            800: '#1e1e1e',
                        },
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 12px 0 rgba(0, 0, 0, 0.08)',
                    }
                },
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .register-card-shadow {
                box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.1);
            }

            .step-indicator {
                @apply h-1 bg-neutral-200 rounded-full relative;
            }

            .step-indicator::before {
                content: '';
                @apply absolute h-3 w-3 bg-primary rounded-full top-[-1px] left-0 transition-all duration-300;
            }

            .input-focus {
                @apply focus:border-primary focus:ring-1 focus:ring-primary focus:outline-none;
            }

            .hidden {
                display: none !important;
            }
        }
    </style>
</head>
<body class="bg-neutral-100 min-h-screen flex items-center justify-center font-inter">
<!-- 注册卡片 -->
<div class="w-full max-w-2xl px-4 py-8">
    <div class="bg-white rounded-xl register-card-shadow p-8 relative overflow-hidden">
        <!-- 装饰元素 -->
        <div class="absolute -top-10 -right-10 w-40 h-40 bg-primary/5 rounded-full"></div>
        <div class="absolute -bottom-16 -left-16 w-48 h-48 bg-primary/5 rounded-full"></div>

        <div class="relative">
            <!-- 注册标题 -->
            <div class="text-center mb-6">
                <h1 class="text-2xl font-bold text-neutral-700">创建新账号</h1>
                <p class="text-neutral-500 mt-2">分两步完成注册</p>
            </div>

            <!-- 步骤指示器 -->
            <div class="step-indicator mb-8" id="stepIndicator"></div>

            <!-- 注册表单 -->
            <form id="registerForm" class="space-y-6">
                <!-- 第一步：基础信息 -->
                <div id="step1" class="step">
                    <!-- 手机号 -->
                    <div class="space-y-2">
                        <label for="phone" class="block text-sm font-medium text-neutral-600">手机号</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-phone"></i>
                            </span>
                            <input
                                    type="tel"
                                    id="phone"
                                    name="phone"
                                    placeholder="请输入手机号"
                                    class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                                    pattern="^1[3-9]\d{9}$"
                                    required
                            >
                            <p class="error-message text-red-500 text-sm hidden" id="phoneError">请输入正确的手机号</p>
                        </div>
                    </div>

                    <!-- 邮箱 -->
                    <div class="space-y-2">
                        <label for="email" class="block text-sm font-medium text-neutral-600">邮箱</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-envelope"></i>
                            </span>
                            <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    placeholder="请输入邮箱"
                                    class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                                    required
                            >
                            <p class="error-message text-red-500 text-sm hidden" id="emailError">请输入有效的邮箱</p>
                        </div>
                    </div>

                    <!-- 用户名 -->
                    <div class="space-y-2">
                        <label for="username" class="block text-sm font-medium text-neutral-600">用户名</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-user"></i>
                            </span>
                            <input
                                    type="text"
                                    id="username"
                                    name="username"
                                    placeholder="请输入用户名（用于登录）"
                                    class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                                    minlength="3"
                                    maxlength="20"
                                    required
                            >
                            <p class="error-message text-red-500 text-sm hidden" id="usernameError">
                                用户名需3-20位字符</p>
                        </div>
                    </div>

                    <!-- 密码 -->
                    <div class="space-y-2">
                        <label for="password" class="block text-sm font-medium text-neutral-600">密码</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-neutral-400">
                                <i class="fa fa-lock"></i>
                            </span>
                            <input
                                    type="password"
                                    id="password"
                                    name="password"
                                    placeholder="请输入密码"
                                    class="w-full pl-10 pr-4 py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                                    minlength="6"
                                    required
                            >
                            <p class="error-message text-red-500 text-sm hidden" id="passwordError">密码至少6位</p>
                        </div>
                    </div>

                    <!-- 下一步按钮 -->
                    <div class="flex justify-end">
                        <button
                                type="button"
                                class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300 mr-2"
                                onclick="nextStep(1)"
                        >
                            下一步
                        </button>
                    </div>
                </div>

                <!-- 第二步：详细信息 -->
                <div id="step2" class="step hidden">
                    <!-- 昵称 -->
                    <div class="space-y-2">
                        <label for="nickName" class="block text-sm font-medium text-neutral-600">昵称</label>
                        <input
                                type="text"
                                id="nickName"
                                name="nickName"
                                class="w-full py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                        >
                    </div>

                    <!-- 意向职位 -->
                    <div class="space-y-2">
                        <label for="jobInterest" class="block text-sm font-medium text-neutral-600">意向职位</label>
                        <input
                                type="text"
                                id="jobInterest"
                                name="jobInterest"
                                placeholder="例如：Java开发工程师"
                                class="w-full py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                                required
                        >
                        <p class="error-message text-red-500 text-sm hidden" id="jobInterestError">请填写意向职位</p>
                    </div>

                    <!-- 技术栈 -->
                    <div class="space-y-2">
                        <label for="techTack"
                               class="block text-sm font-medium text-neutral-600">技术栈（用英文逗号分隔）</label>
                        <input
                                type="text"
                                id="techTack"
                                name="techTack"
                                placeholder="例如：Java,Spring Boot,MySQL"
                                class="w-full py-3 border border-neutral-200 rounded-lg transition-all duration-300 input-focus"
                                required
                        >
                        <p class="error-message text-red-500 text-sm hidden" id="techTackError">
                            请填写技术栈（用英文逗号分隔）</p>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="flex justify-end">
                        <button
                                type="button"
                                class="bg-neutral-300 text-neutral-700 font-medium py-2 px-4 rounded-lg transition-all duration-300 mr-2"
                                onclick="prevStep()"
                        >
                            上一步
                        </button>
                        <button
                                type="button"
                                class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-4 rounded-lg transition-all duration-300"
                                onclick="submitRegistration()"
                        >
                            注册
                        </button>
                    </div>
                </div>
            </form>

            <!-- 底部链接 -->
            <div class="text-center text-sm text-neutral-500 mt-6">
                已有账号? <a href="/view/login.html" class="text-primary hover:text-primary/80 font-medium">立即登录</a>
            </div>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.js"></script>
<script src="../js/register.js"></script>
</body>
</html>